<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="460"
        :destroyOnClose="true"
        :maskClosable="false"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-form class="menu-model" layout="horizontal" :model="formState" :rules="rules" ref="formRef">
            <a-form-item class="full-width" :label="t('yl.oldPass')" name="oldPass">
                <a-input v-model:value="formState.oldPass" type="password" autocomplete="off" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.newPass')" name="newPass">
                <a-input v-model:value="formState.newPass" type="password" autocomplete="off" />
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.repeatOldPass')" name="repeatOldPass">
                <a-input v-model:value="formState.repeatOldPass" type="password" autocomplete="off" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive, toRefs, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { SearchOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'menuModel',
    components: {
        SearchOutlined,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        const showModal = computed(() => props.visible);
        // 表单数据
        const formState = reactive({
            newPass: '',
            oldPass: '',
            repeatOldPass: '',
        });
        const validatePass = (rule: any, value: any, callback: any) => {
            console.log(value);
            console.log(formState.newPass);
            if (value !== formState.newPass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        // 表单校验
        const rules = reactive({
            newPass: [
                { required: true, message: t('yl.newPass'), trigger: 'blur' },
                { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
            ],
            oldPass: [
                { required: true, message: t('yl.oldPass'), trigger: 'blur' },
                { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
            ],
            repeatOldPass: [
                { required: true, message: t('yl.repeatOldPass'), trigger: 'blur' },
                { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                { validator: validatePass, trigger: 'blur', required: true },
            ],
        });
        const formRef = ref();

        // 提交
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                emit('submit', formState);
            });
        };

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };

        onMounted(() => {});

        return {
            formRef,
            t,
            showModal,
            onSubmit,
            handleCancle,
            rules,
            formState,
            validatePass,
        };
    },
});
</script>

<style lang="scss" scoped>
.menu-model {
    @include flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .ant-form-item {
        @include flex;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-input-number {
            width: 100%;
        }
    }
    .full-width {
        position: relative;
        width: 100%;
    }
    .half-width {
        width: calc(50% - 10px);
    }
    .third-width {
        flex: 1;
    }
}
</style>
